﻿<div class="doc-part-box" id="msgbox">
  <style>
    .testbtn {
      border: 1px solid #999999;
      border-radius: 4px;
      color: #333333;
      background-color: #eeeeee;
      font-size: 14px;
      box-sizing: border-box;
      padding: 20px;
      outline: none;
    }
  </style>
  <h2>弹出框</h2>
  <p>原理来自研究bootstrap的弹出层.模仿实现三种系统弹出框alert confirm prompt</p>
  <p>msgbox.alert(文本消息,[回调事件],[按钮样式:primary,danger,success],[弹出位置:center,top,bottom])</p>
  <h1>alert</h1>
  <button class="testbtn" onclick="msgbox.alert('msgbox.alert,默认正中','','primary')">msgbox.alert('msgbox.alert,默认正中','','','primary')</button>
  <button class="testbtn" onclick="msgbox.alert('msgbox.alert,上','','','top')">msgbox.alert('msgbox.alert,上')</button>
  <button class="testbtn" onclick="msgbox.alert('msgbox.alert,下','','','bottom')">msgbox.alert('msgbox.alert,下')</button>

  <h1>confirm</h1>
  <button class="testbtn" onclick="msgbox.confirm('msgbox.confirm,默认正中',confirmCall,'danger')">msgbox.confirm('msgbox.confirm,默认正中',confirmCall,'danger')</button>
  <button class="testbtn" onclick="msgbox.confirm('msgbox.confirm,上',confirmCall,'','top')">msgbox.confirm('msgbox.confirm,上')</button>
  <button class="testbtn" onclick="msgbox.confirm('msgbox.confirm,下',confirmCall,'','bottom')">msgbox.confirm('msgbox.confirm,下')</button>
  <p><label>confirm结果</label>&nbsp;<span id="confirmRes" class="label primary"></span></p>
  <h1>prompt</h1>
  <button class="testbtn" onclick="msgbox.prompt('msgbox.prompt,默认正中',promptCall,'success')">msgbox.prompt('msgbox.prompt,默认正中',promptCall,'success')</button>
  <button class="testbtn" onclick="msgbox.prompt('msgbox.prompt,上',promptCall,'','top')">msgbox.prompt('msgbox.prompt,上')</button>
  <button class="testbtn" onclick="msgbox.prompt('msgbox.prompt,下',promptCall,'','bottom')">msgbox.prompt('msgbox.prompt,下')</button>
  <p><label>prompt结果</label>&nbsp;<span id="promptRes" class="label primary"></span></p>
  <h4>自定义弹出层</h4>
  <p>自定义框是一个HTML片段,弹出的本质是在将它显示在弹出层父级上</p>
  <img src="img/msgboxlayer.png" alt="" width="600"/>
  <p>
    <button onclick="showcustom()">弹出下面的HTML片段msgbox.show(innerhtml)</button>
  </p>
  <pre>
    &lt;div style="background-color:#eee;width:400px;height:140px;border:1px solid #666;align-self:center;padding:15px"&gt;
        &lt;h3&gt;自定义弹出层标题&lt;/h3&gt;
        &lt;p&gt;弹出框原理分析学习,模仿了系统的三种弹出框.实现弹出自定义html片段&lt;/p&gt;
        &lt;div style="text-align:center"&gt;&lt;button onclick="msgbox.close()"&gt;取消&lt;/button&gt;&lt;button onclick="msgbox.close()"&gt;确定&lt;/button&gt;&lt;/div&gt;
    &lt;/div&gt;
    </pre>
  <script>
    function confirmCall(res) {
      let resdom = document.querySelector('#confirmRes');
      resdom.textContent = res == 1 ? "OK" : "Cancel";
    }

    function promptCall(res) {
      let resdom = document.querySelector('#promptRes');
      resdom.textContent = res;
    }

    function showcustom() {
      let innerhtml = `<div style="background-color:#eee;width:400px;border:1px solid #666;align-self:center;padding:15px">
                      <h3>自定义弹出层标题</h3>
                      <p>弹出框原理分析学习,模仿了系统的三种弹出框.实现弹出自定义html片段</p>
                      <p>自定义弹出框需要定义HTML以及按钮事件,然后调用msgbox.show()弹出</p>
                      <div style="text-align:center"><button class="btn" onclick="msgbox.close()">取消</button><button class="btn" onclick="msgbox.close()">确定</button></div>
                  </div>`;
      msgbox.show(innerhtml);
    }
  </script>
</div>
